Pankaj Kukreti's profile

Metro Delhi Explorer

UI/UX Case Study: Local Train App Revamp

Introduction:
This case study outlines the UI/UX revamp of a local train app, focusing on addressing user pain points identified through personal experience and user reviews. The goal is to create a more intuitive, user-friendly, and visually appealing experience for local train commuters.

Problem Statement:

The existing local train app suffers from several UI/UX issues:

• Outdated design: The app's appearance feels dated and lacks a modern aesthetic.
• Limited navigation: The absence of a back button and a complex structure make navigation difficult.
• Inefficient search: No quick search option hinders ease of use.
• Inconsistent information hierarchy: All sections receive equal visual weight, leading to information overload.
• Unclear redirection: Redirects to external links happen without user notification.
• Low-quality logo: The logo is a photo-based image that scales poorly.
• Missing features: No "nearest station" option on the map and lack of functionality to track ad removal after app reinstallation.
• Inefficient user flow: Users require multiple steps to complete simple actions.
• Stressful countdown: A prominent countdown timer creates a sense of urgency unnecessarily.
• Accessibility issues: The app lacks language support for a wider user base.
• Limited information: Lack of details like starting platforms and gate numbers creates inconvenience.
• Inconsistent language: Unclear and inconsistent language usage throughout the app.
Proposed Solutions:

The revamped app addresses these pain points with the following improvements:

• Modern UI: A fresh and modern design language enhances visual appeal and usability.
Improved navigation: Introduction of a back button and a well-structured navigation system simplifies app flow.
• Quick Search: A search bar allows users to quickly find stations and information.
• Prioritized functionalities: High-usage features like search are placed prominently, while less-used features are tucked away.
• Informative icons: Clear and concise icons enhance communication and user understanding.
• Location awareness: Integration of current location and a "nearest station" option on the map facilitates quicker access.
• Collapsible menu: Menus with more than five stations collapse to avoid information overload.
• Optional notifications: Users can choose to disable the countdown timer for a stress-free experience.
• Redirection notifications: Messages inform users before external links open, ensuring transparency.
• Scalable logo: A vector-based logo improves visual quality and scales appropriately on various screens.
• Recent stations: Inclusion of a "Recent Stations" section allows for quick access to frequently visited stations.
• Multilingual support: The app supports multiple Indian languages for broader accessibility.
• Enhanced information: Starting platforms and gate numbers are displayed alongside train listings.
• Consistent language: Consistent terminology and clear language improve user understanding.
• Preserved existing functionality: Core functionalities are retained while integrating new features.
Expected Benefits:

• Increased user satisfaction: Improved UI/UX will streamline user journeys, leading to a more enjoyable and efficient experience.

• Reduced navigation errors: Clear navigation and search functionality will minimize user frustration.

• Enhanced accessibility: Multilingual support will cater to a wider audience.

• Improved information clarity: Better information hierarchy and inclusion of key details will empower informed decision-making.

• Reduced user stress: Optional countdown and redirection messages will provide users with more control over their experience.
Disclaimer:

The images used in this UI are for representational purposes only. I have made a good faith effort to use images that are either in the public domain or licensed for commercial use.

If you are the copyright holder of any image and believe it has been used in error, please contact me and I will be happy to remove it or provide proper attribution.

Sources:

Icons: Icon Scout
Logos (partially): Freepik
Additional images: Google Images (filtered for labeled for reuse)
Metro Delhi Explorer
Published:

Owner

Metro Delhi Explorer

Published: